<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户管理 - 图书馆管理系统</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <div class="admin-container">
        <!-- 左侧边栏 -->
        <aside class="sidebar">
            <div class="sidebar-header">
                <h1 class="logo">
                    <i class="fas fa-book"></i>
                    <span>图书馆管理系统</span>
                </h1>
            </div>
            <nav class="sidebar-nav">
                <ul>
                    <li class="nav-item">
                        <a href="index.html" class="nav-link">
                            <i class="fas fa-tachometer-alt"></i>
                            <span>系统概览</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="seat-management.html" class="nav-link">
                            <i class="fas fa-chair"></i>
                            <span>座位管理</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="booking-management.html" class="nav-link">
                            <i class="fas fa-calendar-alt"></i>
                            <span>预约管理</span>
                        </a>
                    </li>
                    <li class="nav-item active">
                        <a href="user-management.html" class="nav-link">
                            <i class="fas fa-users"></i>
                            <span>用户管理</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="data-analysis.html" class="nav-link">
                            <i class="fas fa-chart-bar"></i>
                            <span>数据分析</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="report-statistics.html" class="nav-link">
                            <i class="fas fa-file-alt"></i>
                            <span>报表统计</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="system-settings.html" class="nav-link">
                            <i class="fas fa-cog"></i>
                            <span>系统设置</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </aside>

        <!-- 主内容区 -->
        <main class="main-content">
            <!-- 顶部导航栏 -->
            <header class="top-navbar">
                <div class="navbar-left">
                    <button class="menu-toggle" id="menuToggle">
                        <i class="fas fa-bars"></i>
                    </button>
                    <h2 class="page-title">用户管理</h2>
                </div>
                <div class="navbar-right">
                    <div class="search-box">
                        <input type="text" placeholder="搜索用户...">
                        <i class="fas fa-search"></i>
                    </div>
                    <div class="notification">
                        <i class="fas fa-bell"></i>
                        <span class="badge">2</span>
                    </div>
                    <div class="user-profile">
                        <img src="assets/avatar-admin.png" alt="管理员头像">
                        <span>管理员</span>
                    </div>
                </div>
            </header>

            <!-- 用户管理内容 -->
            <div class="user-management">
                <!-- 工具栏 -->
                <div class="toolbar">
                    <div class="filter-container">
                        <div class="filter-item">
                            <label>用户状态:</label>
                            <select class="form-control">
                                <option value="all">全部状态</option>
                                <option value="active">正常</option>
                                <option value="frozen">冻结</option>
                                <option value="banned">禁用</option>
                                <option value="pending">待审核</option>
                            </select>
                        </div>
                        <div class="filter-item">
                            <label>用户类型:</label>
                            <select class="form-control">
                                <option value="all">全部类型</option>
                                <option value="student">学生</option>
                                <option value="teacher">教师</option>
                                <option value="staff">教职工</option>
                                <option value="visitor">访客</option>
                            </select>
                        </div>
                        <div class="filter-item">
                            <label>注册日期:</label>
                            <input type="date" class="form-control">
                            <span class="date-separator">至</span>
                            <input type="date" class="form-control">
                        </div>
                    </div>
                    <div class="action-buttons">
                        <button class="btn btn-primary">
                            <i class="fas fa-user-plus"></i> 新增用户
                        </button>
                        <button class="btn btn-outline">
                            <i class="fas fa-upload"></i> 批量导入
                        </button>
                        <button class="btn btn-outline">
                            <i class="fas fa-download"></i> 导出数据
                        </button>
                        <button class="btn btn-outline">
                            <i class="fas fa-refresh"></i> 刷新
                        </button>
                    </div>
                </div>

                <!-- 用户统计卡片 -->
                <div class="stats-cards">
                    <div class="stat-card">
                        <div class="stat-icon">
                            <i class="fas fa-user"></i>
                        </div>
                        <div class="stat-content">
                            <div class="stat-value">5,245</div>
                            <div class="stat-label">总用户数</div>
                        </div>
                        <div class="stat-trend positive">
                            <i class="fas fa-arrow-up"></i> 5%
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon">
                            <i class="fas fa-user-check"></i>
                        </div>
                        <div class="stat-content">
                            <div class="stat-value">4,876</div>
                            <div class="stat-label">正常用户</div>
                        </div>
                        <div class="stat-trend positive">
                            <i class="fas fa-arrow-up"></i>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon">
                            <i class="fas fa-user-clock"></i>
                        </div>
                        <div class="stat-content">
                            <div class="stat-value">345</div>
                            <div class="stat-label">今日活跃</div>
                        </div>
                        <div class="stat-trend positive">
                            <i class="fas fa-arrow-up"></i> 12%
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon">
                            <i class="fas fa-user-slash"></i>
                        </div>
                        <div class="stat-content">
                            <div class="stat-value">128</div>
                            <div class="stat-label">异常用户</div>
                        </div>
                        <div class="stat-trend negative">
                            <i class="fas fa-arrow-up"></i> 3%
                        </div>
                    </div>
                </div>

                <!-- 用户表格 -->
                <div class="card">
                    <div class="card-header">
                        <h3>用户列表</h3>
                        <div class="table-info">
                            <span>共 5,245 个用户</span>
                        </div>
                    </div>
                    <div class="table-container">
                        <table class="data-table" id="userTable">
                            <thead>
                                <tr>
                                    <th><input type="checkbox"></th>
                                    <th>用户ID</th>
                                    <th>用户名</th>
                                    <th>类型</th>
                                    <th>邮箱</th>
                                    <th>手机号</th>
                                    <th>注册日期</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><input type="checkbox"></td>
                                    <td>USER001</td>
                                    <td>
                                        <div class="user-info">
                                            <img src="assets/avatar-1.png" alt="用户头像" class="user-avatar">
                                            <span>张三</span>
                                        </div>
                                    </td>
                                    <td>学生</td>
                                    <td>zhangsan@example.com</td>
                                    <td>138****1234</td>
                                    <td>2023-09-15</td>
                                    <td><span class="status active">正常</span></td>
                                    <td>
                                        <button class="action-btn view">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                        <button class="action-btn edit">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                        <button class="action-btn freeze">
                                            <i class="fas fa-snowflake"></i>
                                        </button>
                                    </td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox"></td>
                                    <td>USER002</td>
                                    <td>
                                        <div class="user-info">
                                            <img src="assets/avatar-2.png" alt="用户头像" class="user-avatar">
                                            <span>李四</span>
                                        </div>
                                    </td>
                                    <td>教师</td>
                                    <td>lisi@example.com</td>
                                    <td>139****5678</td>
                                    <td>2023-08-20</td>
                                    <td><span class="status active">正常</span></td>
                                    <td>
                                        <button class="action-btn view">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                        <button class="action-btn edit">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                        <button class="action-btn freeze">
                                            <i class="fas fa-snowflake"></i>
                                        </button>
                                    </td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox"></td>
                                    <td>USER003</td>
                                    <td>
                                        <div class="user-info">
                                            <img src="assets/avatar-3.png" alt="用户头像" class="user-avatar">
                                            <span>王五</span>
                                        </div>
                                    </td>
                                    <td>学生</td>
                                    <td>wangwu@example.com</td>
                                    <td>137****9012</td>
                                    <td>2023-10-05</td>
                                    <td><span class="status warning">冻结</span></td>
                                    <td>
                                        <button class="action-btn view">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                        <button class="action-btn edit">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                        <button class="action-btn unfreeze">
                                            <i class="fas fa-temperature-high"></i>
                                        </button>
                                    </td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox"></td>
                                    <td>USER004</td>
                                    <td>
                                        <div class="user-info">
                                            <img src="assets/avatar-4.png" alt="用户头像" class="user-avatar">
                                            <span>赵六</span>
                                        </div>
                                    </td>
                                    <td>访客</td>
                                    <td>zhaoliu@example.com</td>
                                    <td>136****3456</td>
                                    <td>2023-10-15</td>
                                    <td><span class="status expired">禁用</span></td>
                                    <td>
                                        <button class="action-btn view">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                        <button class="action-btn delete">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox"></td>
                                    <td>USER005</td>
                                    <td>
                                        <div class="user-info">
                                            <img src="assets/avatar-5.png" alt="用户头像" class="user-avatar">
                                            <span>孙七</span>
                                        </div>
                                    </td>
                                    <td>教职工</td>
                                    <td>sunqi@example.com</td>
                                    <td>135****7890</td>
                                    <td>2023-10-18</td>
                                    <td><span class="status pending">待审核</span></td>
                                    <td>
                                        <button class="action-btn view">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                        <button class="action-btn approve">
                                            <i class="fas fa-check"></i>
                                        </button>
                                        <button class="action-btn reject">
                                            <i class="fas fa-times"></i>
                                        </button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="card-footer">
                        <div class="pagination">
                            <ul>
                                <li><a href="#">上一页</a></li>
                                <li><a href="#" class="active">1</a></li>
                                <li><a href="#">2</a></li>
                                <li><a href="#">3</a></li>
                                <li><a href="#">4</a></li>
                                <li><a href="#">5</a></li>
                                <li><a href="#">下一页</a></li>
                            </ul>
                        </div>
                    </div>
                </div>

                <!-- 用户活跃度图表 -->
                <div class="card">
                    <div class="card-header">
                        <h3>用户活跃度趋势</h3>
                        <div class="chart-controls">
                            <select class="form-control">
                                <option value="week">本周</option>
                                <option value="month" selected>本月</option>
                                <option value="quarter">本季度</option>
                                <option value="year">本年</option>
                            </select>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="chart-placeholder">
                            <p>用户活跃度趋势图表加载中...</p>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <script src="js/main.js"></script>
    <script src="js/user-management.js"></script>
</body>
</html>